import React, { Component } from 'react'
import { withFormik, Form, Field, ErrorMessage } from 'formik'
import { Toast } from 'antd-mobile'
import { Link } from 'react-router-dom'
import API from '../../utils/api'
// 导入Yup
import * as Yup from 'yup'
import NavHeader from '../../components/NavHeader'
import './index.sass'
// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/
class Login extends Component {
  render() {
    return (
      <div className="login">
        <NavHeader className="nav-bar_white">账号登录</NavHeader>
        <div className="form-box">
          <Form>
            <Field className="input" name="username" placeholder="请输入账号" />
            <ErrorMessage className="error" name="username" component="div" />
            <Field className="input" name="password" placeholder="请输入账号" type="password" />
            <ErrorMessage className="error" name="password" component="div" />
            <div className="submit">
              <button type="submit">
                登 录
              </button>
            </div>
          </Form>
        </div>
        <div className="to-registe">
          <Link to="/registe">还没有账号，去注册~</Link>
        </div>
      </div>
    )
  }
}
Login = withFormik({
  mapPropsToValues: () => ({ username: '', password: '' }),
  validationSchema: Yup.object().shape({
    username: Yup.string().required('账号为必填项').matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
    password: Yup.string().required('密码为必填项').matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')
  }),
  handleSubmit: async (values, { props }) => {
    let { username, password } = values
    let res = await API.post('/user/login', { username, password })
    const { status, body, description } = res
    if (status === 200) {
      // 登录成功
      localStorage.setItem('fh_token', body.token)

      /* 
        1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。
        2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
        3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
      */
      if (!props.location.state) {
        // 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可
        props.history.go(-1)
      } else {
        // push：[home, login, map]
        // replace: [home, map]
        props.history.replace(props.location.state.from.pathname)
      }
      // 注意：无法在该方法中，通过 this 来获取到路由信息
      // 所以，需要通过 第二个对象参数中获取到 props 来使用 props
      // props.history.go(-1)
    } else {
      // 登录失败
      Toast.info(description, 2, null, false)
    }
  }

})(Login)
export default Login
